*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
html,body{
    width: 100%;
    height: 100%;
    background-color: #333;
    position: relative;
}
div{   
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 100px #fff;
    transform-style: preserve-3d;
}
div:first-of-type{
    width: 500px;
    height: 500px;
    transform: rotateX(70deg) rotateY(-20deg);
    animation: move1 12s linear infinite;
}
div:first-of-type ul{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    /* animation: move1 12s linear infinite; */
}
div:first-of-type ul li{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid blue;
    box-shadow: 0px 0px 100px blue;
    position: absolute;
}
ul li:nth-child(1){
    transform: rotateY(20deg);
}
ul li:nth-child(2){
    transform: rotateY(40deg);
}
ul li:nth-child(3){
    transform: rotateY(60deg);
}
ul li:nth-child(4){
    transform: rotateY(80deg);
}
ul li:nth-child(5){
    transform: rotateY(100deg);
}
ul li:nth-child(6){
    transform: rotateY(120deg);
}
ul li:nth-child(7){
    transform: rotateY(140deg);
}
ul li:nth-child(8){
    transform: rotateY(160deg);
}
ul li:nth-child(9){
    transform: rotateY(180deg);
}
ul li:nth-child(10){
    transform: rotateX(20deg);
}
 ul li:nth-child(11){
    transform: rotateX(40deg);
}
 ul li:nth-child(12){
    transform: rotateX(60deg);
}
 ul li:nth-child(13){
    transform: rotateX(80deg);
}
 ul li:nth-child(14){
    transform: rotateX(100deg);
}
 ul li:nth-child(15){
    transform: rotateX(120deg);
}
 ul li:nth-child(16){
    transform: rotateX(140deg);
}
 ul li:nth-child(17){
    transform: rotateX(160deg);
}
ul li:nth-child(18){
    transform: rotateX(180deg);
}

/* 第二个圈 */
div:nth-of-type(2){
    width: 800px;
    height: 800px;
    transform: rotateX(70deg) rotateY(-20deg);
    animation: move1 13s linear infinite;
}
div:nth-of-type(2) ul{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    transform-style: preserve-3d;
    animation: move2 13s linear infinite;
}
div:nth-of-type(2) ul li{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #f7d022;
    box-shadow: 0px 0px 10px #f7d022;
}


/* 第三个圈 */
div:nth-of-type(3){
    width: 1200px;
    height: 1200px;
    transform: rotateX(70deg) rotateY(-20deg);
    animation: move1 10s linear infinite;
}
div:nth-of-type(3) ul{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    transform-style: preserve-3d;
    animation: move2 13s linear infinite;
}
div:nth-of-type(3) ul li{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #4cf03d;
    box-shadow: 0px 0px 10px #4cf03d;  
}
/* 第四个圈 */
div:nth-of-type(4){
    width: 1500px;
    height: 1500px;
    transform: rotateY(60deg) rotateX(-40deg);
    animation: move3 10s linear infinite;
}
div:nth-of-type(4) ul{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    transform-style: preserve-3d;
    animation: move2 13s linear infinite;
}
div:nth-of-type(4) ul li{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #ec2bdc;
    box-shadow: 0px 0px 10px #ec2bdc;  
}
/* 第五个圈 */
div:nth-of-type(5){
    width: 2000px;
    height: 2000px;
    transform: rotateX(70deg) rotateY(-20deg);
    animation: move1 10s linear infinite;
}
div:nth-of-type(5) ul{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    transform-style: preserve-3d;
    animation: move2 13s linear infinite;
}
div:nth-of-type(5) ul li{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #f0613d;
    box-shadow: 0px 0px 10px #f0613d;  
}

@keyframes move1{
    from{
        transform: rotateX(70deg) rotateY(-20deg) rotateZ(0deg);
    }
    to{
        transform: rotateX(70deg) rotateY(-20deg) rotateZ(360deg);
    }
}
@keyframes move2{
    from{
        transform:rotateZ(0deg) ;
    }
    to{
        transform: rotateZ(360deg);
    }
}
@keyframes move3{
    from{
        transform: rotateY(60deg) rotateX(-40deg) rotateZ(0deg);
    }
    to{
        transform: rotateY(60deg) rotateX(-40deg) rotateZ(360deg);
    }
}